<template>
	<view style="background-color: #F5F5F5;height: 100vh;" v-if="!vering">
		<view class="header" :style="'padding-top: '+bartop+'px; padding-bottom:10rpx'">
			<view class="goodsmsgheader headertop" style="width: 100%;">
				<navigator open-type="navigateBack" style="padding: 10rpx;">
					<image src="https://x.bilinmeiju.com/static/myfangchan/zjt.png" mode="aspectFit"></image>
				</navigator>
				<text>人脸管理</text>
				<!-- <image src="/static/goodsmsghei.png" mode="aspectFit" bindtap="showmsg" wx:if="{{cartlen=='00'?false:true}}"><text>{{cartlen}}</text></image> -->
			</view>
		</view>
		<view class="top0 topnext" style="padding:10px 0px;">

			<view class="top1">
				<image class="top1img" src="https://x.bilinmeiju.com/static/mychengyuan/login.png" mode=""></image>
				<view class="top1text">
					{{roomname}}
				</view>
			</view>
			<view class="top2">
				<image class="top2img" src="https://x.bilinmeiju.com/static/mychengyuan/qiehuan.png" mode=""></image>
				<view class="top2text">
					<picker mode="selector" :range="roomlist" range-key="roomname" @change="reroom">
						切换房产
					</picker>

				</view>
			</view>
		</view>



		<view class="box" v-for="(item,index) in list" :key="index">
			<view style="height:20rpx;"></view>
			<view class="boxadd">
				<image class="boximg" v-if="!item.showface" @click="item.showface = item.face" :src="item.headimgurl"
					style="border-radius: 50%;" mode=""></image>
				<image class="boximg" v-if="item.showface" @click="item.showface=''" :src="item.face"
					style="border-radius: 50%;" mode=""></image>
				<view class="box-1">
					<view class="box-1-1">
						<view class="box-1-1text">{{item.name}}</view>
						<view class="box-1-1text2" v-if="item.shenfen">
							{{item.shenfen}}
						</view>
						<view class="box-1-1text2" style="opacity: 0;" v-else>
							{{item.shenfen}}
						</view>
					</view>
					<view class="box-1-2">
						手机号：{{item.phone}}
					</view>
					<view class="box-1-2">
						{{item.timename}}
					</view>
				</view>
				<view class="box-3" style="opacity: 0;">

				</view>
				<view class="box-2" v-if="isyezhu||item.isself"
					@click="$gopage('/pages/checkface/checkface?roomid='+item.roomId+'&personid='+item.personId)">
					{{item.face?'重新录入':'录入'}}
				</view>
				<view class="box-3" v-else style="opacity: 0;">

				</view>

			</view>
			<view style="height:20rpx;"></view>
		</view>


		<!-- <view class="bottom" @click="add">
			添加成员
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CustomBar: 0,
				topheight: 0,
				top: 0,
				list: [],
				roomname: '',
				roomId: '',
				roomlist: [{
					roomname: '暂无房产'
				}],
				isyezhu: 0,
				showface: false,
				bartop: 0,
				vering: 1
			}
		},
		onLoad(e) {
			this.bartop = this.$bartop
			this.roomId = e.roomid;
			var vering = uni.getStorageSync('vering');
			if (vering || vering === 0) this.vering = vering;
			this.roominfo()
		},
		methods: {
			reroom(e) {
				var index = e.detail.value;
				this.roomId = this.roomlist[index].roomId;
				this.roominfo();
			},
			roominfo() {
				this.$post('center/roominfo', {
					roomId: this.roomId
				}).then(res => {
					this.roomname = res.data.roomname;
					if (!this.roomId) this.roomId = res.data.roomId;
					var list = res.data.list;
					this.isyezhu = res.data.isyezhu;
					if (list) {
						for (var i = 0; i < list.length; i++) {
							list[i].showface = false;
						}
						this.list = list;
					}
					this.roomlist = res.data.roomlist;
				})
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			},
			add() {
				uni.navigateTo({
					url: '/pages/mychengyuan/addchengyuan'
				})
			}
		}
	}
</script>

<style>
	.beijing {
		width: 100vw;
		height: 174rpx;
		z-index: 1;
		position: absolute;
		top: 0;
	}

	.top {
		z-index: 5;
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		/* align-items: flex-end; */
	}

	.toptext {
		z-index: 5;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
		line-height: 36rpx;
	}

	.topimg {
		z-index: 5;
		width: 20rpx;
		height: 36rpx;
	}

	.top0 {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.top1 {
		display: flex;
		margin-left: 40rpx;
	}

	.top1img {
		width: 30rpx;
		height: 30rpx;
	}

	.top1text {
		margin-left: 10rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000000;
	}

	.top2 {
		background-color: rgb(255, 174, 69);
		border-bottom-left-radius: 30rpx;
		border-top-left-radius: 30rpx;
		width: 162rpx;
		height: 50rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.top2img {
		width: 24rpx;
		height: 20rpx;
	}

	.top2text {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #FFFFFF;
	}

	.box {
		width: 700rpx;
		margin: 10rpx auto;
		background-color: white;
		border-radius: 20rpx;

	}

	.boxadd {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.boximg {
		width: 88rpx;
		height: 88rpx;
	}


	.box-1-1 {
		display: flex;
		align-items: center;
	}

	.box-1-1text {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #363636;
	}

	.box-1-1text2 {
		width: 67rpx;
		height: 30rpx;
		text-align: center;
		background-color: rgb(255, 215, 162);
		border-radius: 10rpx;
		font-size: 20rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #FFFFFF;
	}

	.box-1-2 {
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #989898;
	}

	.box-2 {
		width: 100rpx;
		height: 35rpx;
		text-align: center;
		background-color: rgb(255, 174, 69);
		border-radius: 16rpx;
		font-size: 20rpx;
		line-height: 35rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #FFFFFF;
	}

	.box-3 {
		width: 100rpx;
		height: 35rpx;
		text-align: center;
		background-color: rgb(16, 83, 255);
		border-radius: 16rpx;
		font-size: 20rpx;
		line-height: 35rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #FFFFFF;
	}

	.bottom {

		font-size: 40rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		line-height: 100rpx;
		text-align: center;
		position: fixed;
		bottom: 30rpx;
		color: #FFFFFF;
		width: 700rpx;
		height: 100rpx;
		margin-left: 25rpx;
		background-color: rgb(255, 174, 69);
		border-radius: 50rpx;
	}
</style>
